<template>
  <a-modal v-model:open="state.visible" title="裁剪图片" @cancel="handleCancel" @ok="handleOk" cancelText="取消" okText="确定上传" :keyboard="false" destroyOnClose :maskClosable="false">
    <div class="cropper-wrapper">
      <vue-cropper
        ref="cropper"
        :img="state.img"
        :output-size="state.options.outputSize"
        :output-type="state.options.outputType"
        :info="state.options.info"
        :can-scale="state.options.canScale"
        :auto-crop="state.options.autoCrop"
        :auto-crop-width="state.options.autoCropWidth"
        :auto-crop-height="state.options.autoCropHeight"
        :fixed="state.options.fixed"
        :fixed-number="state.options.fixedNumber"
        :full="state.options.full"
        :fixed-box="state.options.fixedBox"
        :can-move="state.options.canMove"
        :can-move-box="state.options.canMoveBox"
        :original="state.options.original"
        :center-box="state.options.centerBox"
        :height="state.options.height"
        :info-true="state.options.infoTrue"
        :max-img-size="state.options.maxImgSize"
        :enlarge="state.options.enlarge"
        :mode="state.options.mode"
      ></vue-cropper>
    </div>
  </a-modal>
</template>

<script setup>
import { VueCropper } from "vue-cropper";
import { reactive, ref } from "vue";
import 'vue-cropper/dist/index.css'
const props = defineProps({
  width: {
    type: String,
    default: '120px'
  },
  height: {
    type: String,
    default: '120px'
  },
  scale: {
    type: Array,
    default: () => ([1, 1])
  }
})
const cropper = ref(null)
const state = reactive({
  visible: false,
  confirmLoading: false,
  // vue-cropper相关配置 详细的可以去github上看文档
  img: null, //要裁剪的图像资源 可选项: url地址 || base64 || blob
  options: {
    outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1)
    outputType: 'png', // 裁剪生成图片的格式（jpeg || png || webp）
    info: true, // 图片大小信息
    canScale: true, // 图片是否允许滚轮缩放
    autoCrop: true, // 是否默认生成截图框
    autoCropWidth: props.width, // 默认生成截图框宽度
    autoCropHeight: props.height, // 默认生成截图框高度
    fixed: true, // 是否开启截图框宽高固定比例
    fixedNumber: props.scale, // 截图框的宽高比例
    full: true, // false按原比例裁切图片，不失真
    fixedBox: false, // 固定截图框大小，不允许改变
    canMove: true, // 上传图片是否可以移动
    canMoveBox: true, // 截图框能否拖动
    original: false, // 上传图片按照原始比例渲染
    centerBox: true, // 截图框是否被限制在图片里面
    height: true, // 是否按照设备的dpr 输出等比例图片
    infoTrue: false, // true为展示真实输出图片宽高，false展示看到的截图框宽高
    maxImgSize: 3000, // 限制图片最大宽度和高度
    enlarge: 5, // 图片根据截图框输出比例倍数
    mode: 'contain', // 图片默认渲染方式
  },
});

const emit = defineEmits(["ok"])
// 调用此方法需传入一个 [url地址 || base64 || blob]
// 父组件调用: this.$refs['cropperModal'].edit(参数)
const edit = (image) => {
  state.img = image;
  state.visible = true;
};
// 监听对话框的OK/Cancel按钮的点击事件
const handleOk = () => {
  state.confirmLoading = true;
  // 获取截图的base64 数据
  // getCropBlob获取二进制数据
  cropper.value.getCropData((data) => {
    //将裁剪侯后的图片对象射给**父组件**,然后关闭对话框
    emit("ok", data);
    handleCancel();
  });
};
const handleCancel = (e) => {
  state.visible = false;
};
defineExpose({edit})
</script>

<style lang="scss" scoped>
.cropper-wrapper {
  width: 100%;
  height: 400px;
}
</style>